<template>
  <div
    style="
      z-index: 999;
      height: 100vh;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
    "
  >
    <div id="container">
      <div id="loader"></div>
    </div>
    <h4>请稍后...</h4>
  </div>
</template>

<script></script>

<style lang="scss" scoped>
body {
  background: rgb(235, 205, 86);
}
h4 {
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  font-weight: 200;
  opacity: 0.5;
  font-family: sans-serif;
  color: #fff;
}
#container {
  width: 70px;
  height: 35px;
  overflow: hidden;
  position: absolute;
  top: calc(50% - 17px);
  left: calc(50% - 35px);
}
#loader {
  width: 70px;
  height: 70px;
  border-style: solid;
  border-top-color: #ff4d4d;
  border-right-color: #7e0000;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
  animation: rotate 3s ease-in-out infinite;
  transform: rotate(-200deg);
}
@keyframes rotate {
  0% {
    border-width: 10px;
  }
  25% {
    border-width: 3px;
  }
  50% {
    transform: rotate(115deg);
    border-width: 10px;
  }
  75% {
    border-width: 3px;
  }
  100% {
    border-width: 10px;
  }
}
</style>
